<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .red {
            border: 1px solid red;
        }

        #div {
            width: 300px;
            height: 300px;
            border: 2px solid gray;
            margin: 100px 0 0 200px;

        }
    </style>
</head>

<body>
    姓名：<input type="text"> <span></span>
    <div>
        <span>请选择您喜欢的颜色:</span>
        <select id="color">
            <option value="0">请选择</option>
            <option value="yellow">黄色</option>
            <option value="orange">橘色</option>
            <option value="pink">粉色</option>
            <option value="purple">紫色</option>
        </select>
    </div>
    <div id="div">我是div</div>
</body>
<script type="text/javascript">
    // 补充代码
    var inpt = document.getElementsByTagName('input')[0];
    var sp = document.getElementsByTagName('span')[0];
    console.log(sp);
    inpt.onfocus = function () {
        if (this.value == '') {
            sp.innerHTML = '请输入您的姓名';
        }
    }
    inpt.onblur = function () {
        if (this.value == '') {
            sp.innerHTML = '用户名不能为空';
            this.className = 'red';
        } else {
            sp.innerHTML = '';
            this.className = '';
        }
    }

    var sel = document.getElementById('color');
    var d = document.getElementById('div');

    sel.onchange = function () {
        //获取当前选中的值
        //var bgcolor = this.value;

        var bgcolor = sel.options[sel.selectedIndex].value;//selectedIndex 选中的菜单的索引
        if (bgcolor == 0) {
            div.innerHTML = '我没有任何变化';
            div.style.backgroundColor = "#fff";
        } else {
            div.innerHTML = '我的颜色变成了' + bgcolor + '色';
            div.style.backgroundColor = bgcolor;
        }
    }
</script>
</body>

</html>